<template>
  <div class="home">
    <el-row :gutter="20">
      <el-col :span="24">
        <h1>物业卫生保洁信息系统</h1>
        <p>欢迎使用物业卫生保洁管理系统，本系统提供用户管理、区域管理、保洁人员管理、任务管理等功能。</p>
      </el-col>
    </el-row>
    
    <el-row :gutter="20" style="margin-top: 40px;">
      <el-col :span="6">
        <el-card shadow="hover">
          <div class="stat-card">
            <div class="stat-number">{{ stats.totalUsers }}</div>
            <div class="stat-label">总用户数</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover">
          <div class="stat-card">
            <div class="stat-number">{{ stats.totalAreas }}</div>
            <div class="stat-label">管理区域</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover">
          <div class="stat-card">
            <div class="stat-number">{{ stats.totalCleaners }}</div>
            <div class="stat-label">保洁人员</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card shadow="hover">
          <div class="stat-card">
            <div class="stat-number">{{ stats.totalTasks }}</div>
            <div class="stat-label">今日任务</div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'

const stats = ref({
  totalUsers: 0,
  totalAreas: 0,
  totalCleaners: 0,
  totalTasks: 0
})

onMounted(() => {
  // 这里可以加载统计数据
  stats.value = {
    totalUsers: 156,
    totalAreas: 42,
    totalCleaners: 89,
    totalTasks: 128
  }
})
</script>

<style scoped>
.home {
  padding: 20px;
}

h1 {
  color: #409EFF;
  margin-bottom: 20px;
}

.stat-card {
  text-align: center;
  padding: 20px;
}

.stat-number {
  font-size: 36px;
  font-weight: bold;
  color: #409EFF;
  margin-bottom: 10px;
}

.stat-label {
  font-size: 14px;
  color: #666;
}
</style>